<!--订单-->
<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import {message} from 'ant-design-vue';
import {useRouter} from "vue-router";

const router = useRouter();
const houseList = ref([]);
const token = localStorage.getItem("access-token");
const userId = sessionStorage.getItem("userId");
// 预约列表
const getCollections = async () => {
  try {
    const response = await axios.get(`${window.link}/user/contract`, {
      headers: {
        "access-token": token
      }
    });
    console.log(response);
    if (response.data.code === 200) {
      houseList.value = response.data.data;
    } else {
      message.error("获取预约列表失败");
    }
  } catch (error) {
    console.error("获取预约列表失败", error);
    message.error("获取预约列表失败");
  }
};


// 继约
const continueCollection = (houseId) => {
  sessionStorage.setItem("houseId", houseId);
  router.push("/contract")
};

//退租
const exitCollection = async (id) => {
  try {
    const response = await axios.put(`${window.link}/user/contract/${id}`, {}, {
      headers: {
        "access-token": token
      }
    });
    console.log(response)
    if (response.data.code === 200) {
      message.success("退租成功")
      await getCollections();
    } else {
      message.error(response.data.message);
    }
  } catch (error) {
    console.log("退租错误", error)
    message.error("退租错误")
  }
}


const handleClick = (id) => {
  sessionStorage.setItem("houseId", id);
  router.push("/house");
};
const userStatus = (item) => {
  const b = item.contract.leaseStatus === "已退租" || item.contract.leaseStatus === '已到期'
  console.log(b)
  return b;
}
const getLeaseStatusClass = (status) => {
  console.log(status)
  if (status === '已签约') {
    return 'green-text'; // 绿色
  } else if (status === '续约待确认' || status === '退租待确认') {
    return 'orange-text'; // 橙色
  } else if (status === '已退租' || status === '已到期') {
    return 'red-text'; // 红色
  }
  return ''; // 默认情况
}
const putContractStatus = async (id) => {
  try {
    const response = await axios.put(`${window.link}/user/contract/${id}`, {}, {
      headers: {
        "access-token": token
      }
    })
    if (response.data.code === 200) {
      message.success("修改成功")
      await getCollections();
    } else {
      console.log(response.data.message);
      message.error("修改失败");
    }
  } catch (error) {
    console.log("修改失败", error)
    message.error("修改失败")
  }
}
// 组件挂载时获取数据
getCollections()

const videoExtensions = ['mp4', 'webm', 'ogg']
const isVideo = (url) => {
  const extension = url.split('.').pop().toLowerCase()
  return videoExtensions.includes(extension)
}
</script>
<template>
  <div class="min-h-screen  bg-gray-50">
    <div class="w-[1400px] mx-auto py-8 px-4">
      <div class="bg-white rounded-lg shadow-sm p-6">
        <!-- 标题 -->
        <h1 class="text-xl font-medium mb-6">我的订单信息</h1>
        <!-- 房源列表 -->
        <div class="space-y-4">
          <div v-for="(item,index) in houseList" :key="index"
               class="flex bg-white border rounded-lg p-4 hover:shadow-md transition-shadow">
            <!-- 图片部分 -->
            <div class="w-48 h-32 overflow-hidden rounded-lg mr-4">
              <img v-if="!isVideo(item.houseItemVo.graphUrl)" :src="item.houseItemVo.graphUrl" class="w-full h-full object-cover" />
              <video v-else :src="item.houseItemVo.graphUrl" class="w-full h-full object-cover"/>
            </div>
            <!-- 信息部分 -->
            <div class="flex-1 ">
              <h3 class="text-lg font-medium mb-2 hover:text-blue-300 cursor-pointer"
                  @click="handleClick(item.houseItemVo.id)">{{ item.houseItemVo.title }}</h3>
              <div class="text-sm text-gray-500 mb-2">
                租客名称：{{ item.contract.tenantName }} <br>
                租客电话：{{ item.contract.tenantPhone }} <br>
                租客状态：<span :class="getLeaseStatusClass(item.contract.leaseStatus)">{{
                  item.contract.leaseStatus
                }}</span>
              </div>
              <div class="flex justify-between items-center mt-4">
                <span class="text-orange-500 text-lg font-medium">{{ item.contract.rent }}元/总值</span>
                <div class="space-x-4">
                  <div v-if="item.contract.ownerId != userId">
                    <div v-if="item.contract.leaseStatus === '退租待确认'">
                      等待房东确认
                    </div>
                    <div v-else-if="item.contract.leaseStatus === '已退租'">

                    </div>
                    <div v-else class="text-orange-400">
                      <a-button
                          type="link"
                          class="!rounded-button"
                          @click="continueCollection(item.contract.houseId)"
                      >
                        续约
                      </a-button>
                      <a-button
                          type="link"
                          class="!rounded-button"
                          @click="exitCollection(item.contract.id)"
                      >
                        退租
                      </a-button>

                    </div>
                  </div>


                  <div v-else>
                    <div v-if="!userStatus(item)">
                      <span v-if="item.contract.leaseStatus === '退租待确认'">
                        <a-button @click="putContractStatus(item.contract.id)">
                          确认退租
                        </a-button>
                      </span>
                      <span v-else class="text-gray-600">
                        正在使用。。。。
                      </span>
                    </div>
                    <div v-else>
                      <span class="text-green-500">
                        空闲
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.ant-tag {
  border: none;
  padding: 2px 12px;
  border-radius: 4px;
}

.green-text {
  color: green;
}

.red-text {
  color: red;
}

.orange-text {
  color: orange;
}
</style>
